<template>
  <el-container style="height: 100%;width:100%;">
    <el-header class="modern-header">
      <Navagation :user="user"
                  :role="role"
                  :login-status="loginStatus"
      ></Navagation>
    </el-header>


    <el-main style="background-color: lightgrey;width:100%;">

      <router-view />
    </el-main>

    <el-footer style="height: 40px; align-items: center;justify-content: center;display: flex;">
      <div class="footer-container" >
        <div class="footer-content" style="text-align: center;">
          <p>Copyright © 2025 星界贸易</p>
        </div>
      </div>
    </el-footer>
  </el-container>

</template>

<script>

import Navagation from "@/components/Navagation";
import request from "@/utils/request";

export default {
  name: "Front",
  data(){
    return{
      user:{},
      role: 'user',
      loginStatus: false,
    }
  },
  methods: {
    getUser() {
      let username = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).username : ""
      if (username) {
        // 从后台获取User数据
        this.request.get("/userinfo/" + username).then(res => {
          // 重新赋值后台的最新User数据
          this.user = res.data
          console.log(this.user.role)
        })
      }

    },
  },


  components:{
    Navagation,
  },
  created() {
    if(localStorage.getItem("user")){
      request.post("http://localhost:8080/role").then(res=> {
        if (res.code === '200') {
          this.role = res.data;
          if (localStorage.getItem("user")) {
            this.user = JSON.parse(localStorage.getItem("user"));
            this.loginStatus = true;
          }
        } else {
          this.user = {nickname: '您未登录', avatarUrl: null};
          localStorage.removeItem('user')
          this.loginStatus = false;
        }
      })
    }else{
      this.user = {nickname: '您未登录', avatarUrl: null};
      this.loginStatus = false;
    }

  }
}
</script>

<style scoped>
@import "../../assets/css/search.css";

.modern-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.modern-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  pointer-events: none;
}

.image {
  width: 100%;
  display: block;
}
</style>
